<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<!-- Start with -->
<div role="main">
  <input id="comboBox"
      role="combobox"
      type="search"
      autofocus
      aria-autocomplete="list"
      aria-expanded="true"
      aria-haspopup="true"
      aria-activedescendant="state2"
      aria-controls="stateList">
  <div id="container"/>
</div>

<script>
  async_test((t) => {
    let comboBox = accessibilityController.accessibleElementById('comboBox');
    document.getElementById('container').innerHTML =
          '<ul id="stateList" role="listbox"><li id="state1" role="option">Alabama</li><li id="state2" role="option">Alaska</li></ul>';
    document.body.offsetTop;
    t.step_timeout(() => {
      assert_true(comboBox.isFocused, 'Combo box should be focused.');
      let state1 = accessibilityController.accessibleElementById('state1');
      assert_false(state1.isSelected, 'State1 should not be selected.');
      assert_true(state1.isFocusable, 'State1 should be focusable.');
      assert_false(state1.isFocused, 'State1 should not be focused.');

      let state2 = accessibilityController.accessibleElementById('state2');
      assert_equals(comboBox.activeDescendant, state2, 'State2 should be the active descendant.');
      assert_true(state2.isSelected, 'State2 should be selected.');
      assert_true(state2.isFocusable, 'State2 should be focusable.');
      assert_false(state2.isFocused, 'State2 should not be focused.');

      t.done();
    }, 1);
  }, 'An option with an activedescendant pointing to it is selected.');
</script>
